<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<div id="code-search" style="padding-bottom: 10px;padding-top: 10px">
    <div style="padding-bottom: 10px">
        <span>彩种:</span>
        <input id="lottery-type" name="type" editable="false"/>
    </div>

    <div style="padding-bottom: 10px">
        <span>省市:</span>
        <input id="lottery-city" name="city" editable="false"/>
    </div>
    <div style="padding-bottom: 10px">
        <span>日期:</span>
        <input id="lottery-date" name="date"/>
    </div>

    <div>
        <a id='lottery-search' class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </div>

</div>
<table class="easyui-datagrid" id="itemList" title="号码列表" style="width:1000px;height: 500px"
       data-options="singleSelect:false,checkOnSelect:false,collapsible:true,pagination:false,fit:false,fitColumns:true,method:'get',toolbar:toolbar,columns:columns">
    <%--<thead>--%>
    <%--<tr>--%>
        <%--<th data-options="field:'ck',checkbox:true,rowspan:2,align:'center'"></th>--%>
        <%--<th data-options="field:'issueno',width:80,rowspan:2,align:'center',sortable:true">期号</th>--%>
        <%--<th data-options="field:'caiName',width:80,rowspan:2,align:'center'">彩种名</th>--%>
        <%--<th data-options="colspan:5">开奖号码</th>--%>
        <%--<th data-options="field:'opendate',width:150,align:'center',formatter:E3.formatDateTime,rowspan:2">开奖时间</th>--%>
    <%--</tr>--%>
    <%--<tr>--%>
        <%--<th data-options="field:'number1',width:80,align:'center',styler: function(value,row,index){return 'color:red;font-weight:bold;';}">--%>
            <%--号码1--%>
        <%--</th>--%>
        <%--<th data-options="field:'number2',width:80,align:'center',styler: function(value,row,index){return 'color:red;font-weight:bold;';}">--%>
            <%--号码2--%>
        <%--</th>--%>
        <%--<th data-options="field:'number3',width:80,align:'center',styler: function(value,row,index){return 'color:red;font-weight:bold;';}">--%>
            <%--号码3--%>
        <%--</th>--%>
        <%--<th data-options="field:'number4',width:80,align:'center',styler: function(value,row,index){return 'font-weight:bold;';}">--%>
            <%--号码4--%>
        <%--</th>--%>
        <%--<th data-options="field:'number5',width:80,align:'center',styler: function(value,row,index){return 'font-weight:bold;';}">--%>
            <%--号码5--%>
        <%--</th>--%>
    <%--</tr>--%>
    <%--</thead>--%>
</table>
<div id="itemEditWindow" style="padding:10px;">
    <div style="padding:5px;" border="false">
        <form id="itemeEditForm" method="post" action="">
            <input type="hidden" name="id" id="code_id"/>
            <input type="hidden" name="caiId" id="cai_id"/>
            <table class="table-edit" width="80%" align="center">
                <tr class="title">
                    <td colspan="2">开奖号码信息</td>
                </tr>
                <tr>
                    <td>期号</td>
                    <td><input id="issue_no" type="text" name="issueno" class="easyui-textbox" readonly="true"/></td>
                </tr>
                <tr>
                    <td>彩种</td>
                    <td><input type="text" name="caiName" class="easyui-textbox" readonly="true"/></td>
                </tr>
                <tr>
                    <td>开奖号码</td>
                    <td id="td-code">
                        <%--<input id="number1" name="number1" style="width:50px;"/>--%>
                        <%--<input id="number2" name="number2" style="width:50px;"/>--%>
                        <%--<input id="number3" name="number3" style="width:50px;"/>--%>
                        <%--<input id="number4" name="number4" style="width:50px;"/>--%>
                        <%--<input id="number5" name="number5" style="width:50px;"/>--%>
                    </td>
                </tr>
                <tr>
                    <td>开奖时间</td>
                    <td><input type="text" name="opendate" class="easyui-validatebox" readonly="true" style="width:250px;"/></td>
                </tr>
            </table>
            <div align="right" style="margin-right: 10%;margin-top: 15px">
                <a id="save_btn" href="#">保存</a>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">

    function getSelectionsIds() {
        var itemList = $("#itemList");
        var sels = itemList.datagrid("getSelections");
        var ids = [];
        for (var i in sels) {
            ids.push(sels[i].id);
        }
        ids = ids.join(",");
        return ids;
    }

    //编辑操作
    function updateCode() {
        var ids = getSelectionsIds();
        if (ids.length == 0) {
            $.messager.alert('提示', '必须选择一期才能编辑!');
            return;
        }
        if (ids.indexOf(',') > 0) {
            $.messager.alert('提示', '只能选择一期!');
            return;
        }

        $("#itemEditWindow").window({
            onBeforeOpen:function(){
                //根据彩种添加号码个数 现在固定添加5个
                $('#td-code').empty();
                for (var i=1;i<=5;i++) {
                    $('#td-code').append('<input id="number'+i+'"'+'name="number'+i+'"'+'style="width:50px;"/>')
                    $('#number'+i).combobox({
                        valueField: 'id',
                        textField: 'value',
                        data:codeNums
                    });
                }

            },
            onOpen:function(){
                var data = $("#itemList").datagrid("getSelections")[0];
                console.log(data);
                $("#itemeEditForm").form("load", data);
            }
        }).window("open");
    }

    //删除操作
    function deleteCode() {
        var ids = getSelectionsIds();
        if (ids.length == 0) {
            $.messager.alert('提示', '未选期号!');
            return;
        }
        $.messager.confirm('确认', '确定删除期号 ' + ids + ' 吗？', function (r) {
            if (r) {
                var data = $("#itemList").datagrid("getSelections")[0];
                var params = {"id": data.id};
                $.get('${pageContext.request.contextPath}/code/deletecode', params, function (data) {
                    if (data.code === 10000) {
                        $.messager.alert('提示', '删除成功!', undefined, function () {
                            $("#itemList").datagrid("reload");
                        });
                    }else {
                        $.messager.alert('错误', '删除失败!');
                    }
                },"json");
            }
        });
    }

    function editCode(index) {
        $("#itemEditWindow").window({
            onBeforeOpen:function(){
                //根据彩种添加号码个数 现在固定添加5个
                $('#td-code').empty();
                for (var i=1;i<=5;i++) {
                    $('#td-code').append('<input id="number'+i+'"'+'name="number'+i+'"'+'style="width:50px;"/>')
                    $('#number'+i).combobox({
                        valueField: 'id',
                        textField: 'value',
                        data:codeNums
                    });
                }

            },
            onOpen:function(){
                var data = $("#itemList").datagrid("getData").rows[index];
                $("#itemeEditForm").form("load", data);
            }
        }).window("open");
    }

    //定义工具栏
    var toolbar = [{
        text: '编辑',
        iconCls: 'icon-edit',
        handler: updateCode
    }, {
        text: '删除',
        iconCls: 'icon-cancel',
        handler: deleteCode
    }];

    //定义列
    var columns = [[
        {
            field:'ck',
            checkbox:true,
            rowspan:2,
            align:'center'
        },{
            field:'issueno',
            width:80,
            rowspan:2,
            align:'center',
            sortable:true,
            title:'期号'
        },{
            field:'caiName',
            width:80,
            rowspan:2,
            align:'center',
            title:'彩种名'
        },{
            colspan:5,
            title:'开奖号码',
            fixed:true
        },{
            field:'opendate',
            width:120,
            align:'center',
            formatter:E3.formatDateTime,
            rowspan:2,
            title:'开奖时间'
        },{
            field:'operate',
            width:80,
            align:'center',
            rowspan:2,
            title:'操作',
            formatter:function (value,rowData,index) {
                var str = '<a href="javascript:void(0)" name="opera" class="easyui-linkbutton" onclick="editCode('+index+')"></a>';
                return str;
            }
        }
    ],[
        {
            field:'number1',
            width:80,
            align:'center',
            title:'号码1',
            styler: function(value,row,index){
                return 'color:red;font-weight:bold;';
            },
            fixed:true
        }, {
            field:'number2',
            width:80,
            align:'center',
            title:'号码2',
            styler: function(value,row,index){
                return 'color:red;font-weight:bold;';
            },
            fixed:true
        }, {
            field:'number3',
            width:80,
            align:'center',
            title:'号码3',
            styler: function(value,row,index){
                return 'color:red;font-weight:bold;';
            },
            fixed:true
        }, {
            field:'number4',
            width:80,
            align:'center',
            title:'号码4',
            styler: function(value,row,index){
                return 'font-weight:bold;';
            },
            fixed:true
        }, {
            field:'number5',
            width:80,
            align:'center',
            title:'号码5',
            styler: function(value,row,index){
                return 'font-weight:bold;';
            },
            fixed:true
        }
    ]];

    $(function () {
        $('#save_btn').linkbutton({
            iconCls: 'icon-save'
        });
        $('#save_btn').bind('click', function(){
            var id = $('#code_id').val();
            var caiId = $('#cai_id').val();
            var issueNo = $('#issue_no').val();
            var opencode = [];
            for (var i=1;i<=5;i++) {
                var code = $('#number'+i).combobox('getValue');
                opencode.push(code);
            }
            $.get('${pageContext.request.contextPath}/code/updatecode',{
                id:id,
                opencode:opencode.join(','),
                caiid:caiId,
                issueno:issueNo
            },function (data) {
               if (data.code === 10000) {
                   $('#itemList').datagrid('reload');
                   $("#itemEditWindow").window('close');
               } else {
                   $.messager.alert('错误', '更新失败!');
               }
            },'json');
        });
        $('#lottery-type').combobox({
            url: '${pageContext.request.contextPath}/code/getcaitype',
            method: 'GET',
            valueField: 'caiTypeId',
            textField: 'caiTypeName',
            prompt: '请选择彩种',
            onLoadSuccess: function () {
                var val = $(this).combobox('getData');
                if (val != null)
                    $(this).combobox("select", val[0].caiTypeId);
            },
            onSelect: function (data) {
                var url = '${pageContext.request.contextPath}/code/getcaicity?id=' + data.caiTypeId;
                $('#lottery-city').combobox('reload', url);
            }
        });
        $('#lottery-city').combobox({
            method: 'GET',
            valueField: 'caiId',
            textField: 'caiName',
            prompt: '请选择省份',
            onLoadSuccess: function () {
                var val = $(this).combobox('getData');
                if (val != null)
                    $(this).combobox("select", val[0].caiId);
            }

        });
        $('#lottery-date').datebox({
            editable: false
        });
        $('#lottery-search').click(function () {
            var caitypeid = $('#lottery-type').combobox('getValue');
            var id = $('#lottery-city').combobox('getValue');
            var date = $('#lottery-date').datebox('getValue');
            if (caitypeid === "" || id === "") {
                $.messager.alert('提示', "请选择相应的彩种");
                return;
            }

            if (date === "") {
                $.messager.alert('提示', "请选择相应的日期");
                return;
            }
            date = date.replace(/-/g, "/");
            var date_str = new Date(date).format('yyMMdd');
            var startno = parseInt(date_str) * 100;
            var endno = startno + 100;
            $('#itemList').datagrid('loadData', {total: 0, rows: []});

            $('#itemList').datagrid({
                url: '${pageContext.request.contextPath}/code/getcodelist', //获取数据后台接口
                method: "GET",
                contentType: "application/json",
                queryParams: {
                    id: id,
                    startno: startno,
                    endno: endno
                },
                rownumbers: true, //行号
                striped: true,
                loadMsg: "正在努力加载数据,表格渲染中...",
                onLoadSuccess: function (data) {
                    $("a[name='opera']").linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
                    $('#itemList').datagrid('fixRowHeight');
                },
                onClickRow: function (rowIndex, rowData) {
                    $(this).datagrid('unselectRow', rowIndex);
                }
            });
        });

        $('#itemEditWindow').window({
            title: '修改开奖号码',
            width: 600,
            modal: true,
            shadow: true,
            closed: true,
            height: 400,
            resizable:false,
            collapsible:false,
            minimizable:false,
            maximizable:false,
            iconCls:'icon-save'
        });
    });
</script>